{% extends 'base/base.html' %}

{% block title %}{{ title }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h2 class="h4">
                    {% if project %}
                        <i class="fa fa-pencil" aria-hidden="true"></i> {{ title }}
                    {% else %}
                        <i class="fa fa-plus" aria-hidden="true"></i> {{ title }}
                    {% endif %}
                </h2>
            </div>
            <div class="card-body">
                <form method="post">
                    {% csrf_token %}
                    {% if form.errors %}
                        <div class="alert alert-danger" role="alert">
                            <i class="fa fa-exclamation-circle" aria-hidden="true"></i> 请检查以下错误并重新提交表单。
                        </div>
                    {% endif %}
                    <div class="mb-3">
                        <label for="id_name" class="form-label">
                            <i class="fa fa-file-text-o" aria-hidden="true"></i> 项目名称 <span class="text-danger">*</span>
                        </label>
                        {{ form.name }}
                        {% if form.name.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.name.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="mb-4">
                        <label for="id_description" class="form-label">
                            <i class="fa fa-align-left" aria-hidden="true"></i> 项目描述 (可选)
                        </label>
                        {{ form.description }}
                        {% if form.description.errors %}
                            <div class="text-danger mt-1">
                                {% for error in form.description.errors %}
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-check" aria-hidden="true"></i> 保存
                        </button>
                        <a href="{% if project %}{% url 'projects:project_detail' project.id %}{% else %}{% url 'projects:project_list' %}{% endif %}" class="btn btn-secondary">
                            <i class="fa fa-times" aria-hidden="true"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
    // 添加页面加载动画效果
    document.addEventListener('DOMContentLoaded', function() {
        // 为表单元素添加焦点效果
        const formInputs = document.querySelectorAll('.form-control');
        formInputs.forEach(input => {
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('shadow-sm');
            });
            input.addEventListener('blur', function() {
                this.parentElement.classList.remove('shadow-sm');
            });
        });
        
        // 为项目名称输入框添加字数统计
        const nameInput = document.getElementById('id_name');
        if (nameInput) {
            // 创建字数统计元素
            const countElement = document.createElement('div');
            countElement.className = 'text-muted text-sm mt-1';
            countElement.innerHTML = `${nameInput.value.length}/100`;
            nameInput.parentNode.appendChild(countElement);
            
            // 添加输入事件监听
            nameInput.addEventListener('input', function() {
                countElement.innerHTML = `${this.value.length}/100`;
                // 当输入接近最大长度时，改变颜色
                if (this.value.length > 90) {
                    countElement.className = 'text-warning text-sm mt-1';
                } else if (this.value.length > 100) {
                    countElement.className = 'text-danger text-sm mt-1';
                } else {
                    countElement.className = 'text-muted text-sm mt-1';
                }
            });
        }
        
        // 为描述文本框添加自动高度调整
        const descriptionTextarea = document.getElementById('id_description');
        if (descriptionTextarea) {
            // 初始调整高度
            descriptionTextarea.style.height = 'auto';
            descriptionTextarea.style.height = (descriptionTextarea.scrollHeight) + 'px';
            
            // 添加输入事件监听，自动调整高度
            descriptionTextarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        }
    });
</script>
{% endblock %}